<template>
	<view class="content">
		<view class="del">
			<button  class="u-reset-button" @click="del()">删除</button>
		</view>
		<view class="car-list">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="car-li" v-for="(item,index) in carList" :key="index">
					<u-checkbox v-model="item.checked"
						active-color="#FBAA27"
					>
						<view class="car-li-box">
							<image src="" mode=""></image>
							<view class="car-li-r">
								<view class="title">
									普通机洗
								</view>
								<view class="des u-line-2">
									使用自动机械对鞋子里外进行清洗，使用
									温和洗涤剂，机洗会有概率损伤鞋面...
								</view>
								<view class="price">
									10元/双
								</view>
							</view>
						</view>
					</u-checkbox>
					
					
				</view>
			</u-checkbox-group>
			
		</view>
		<view class="pay">
			<button class="u-reset-button" >支付（10元）</button>
		</view>
		<u-tabbar :list="tabbar" :before-switch="beforeSwitch" :mid-button="true" :border-top="false"  mid-button-size="110" active-color="#FF9A33" inactive-color="#999999"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbar:[],
				carList:[{checked:false},{checked:false}]
			}
		},
		onLoad() {
			this.tabbar = this.$store.state.tabbar
		},
		methods: {
			checkboxGroupChange(){
				
			},
			del(){
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除选中得商品吗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			beforeSwitch(index){
				console.log(index)
				if(index != 2){
					return true
				}else{
					uni.scanCode({
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
					return false
				}
			}
		}
	}
</script>

<style lang="less">
.content{
	height: 100%;
	// min-height: 100vh;
	position:relative;
	background-image:linear-gradient(0deg, #F9F9F9, #FBAA27);
	background-size:100% 200rpx;
	background-repeat: no-repeat;
	padding-bottom: 20rpx;
	background-color: #F9F9F9;
	padding: 0 20rpx;
}
.pay{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60rpx;
	button{
		width: 400rpx;
		height: 60rpx;
		background: #FBAA27;
		color: #FFFFFF;
		text-align: center;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
	}
}
.car-li{
	background: #FFFFFF;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
		padding: 30rpx 18rpx;
		border-radius: 10rpx;
	image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.car-li-box{
		display: flex;
		align-items: center;
	
		.car-li-r{
			width: calc(100% - 160rpx);
			padding-left: 21rpx;
			.title{
				font-size: 30rpx;
				font-weight: bold;
			}
			.des{
				font-size: 24rpx;
				color: #7C7C7C;
				line-height: 30rpx;
				margin-bottom: 33rpx;
			}
			.price{
				font-size: 24rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}
}
/deep/ .u-checkbox__icon-wrap--square{
	border-radius: 50% !important;
}
.del{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 49rpx;
	margin-bottom: 30rpx;
	button{
		margin: 0;
		color: #FFFFFF;
	}
}
</style>
